<template>
  <div class="wrap">
    <!-- <div class="logo-box-r">
      <div class="item01"><img src="../../static/img2/shansong_logo.png" alt=""></div>
    </div> -->
    <div class="container">
      <!-- <span class="sendSms" @click="onSendSms">发送短信</span> -->
      <div style="height: 100%;width:98.5%;border-radius: 34px;overflow: hidden;">
        <div class="tab">
          <!-- <div :style="{width: tabWidth + '%'}" :class="{item: 1, selected: currentTab === index}" v-for="(item, index) in resultList" :key="item.id" @click="onPrizeTab(index,item.id)">
             <div>{{item.name}}</div>  
          </div> -->
          <div :style="{width: tabWidth + 'px'}" :class="{item: 1, selected: currentTab === index}" v-for="(item, index) in resultList" :key="item.id" @click="onPrizeTab(index,item.id)">
             <div>{{item.name}}</div>  
          </div>
        </div>

        <div class="table">
          <div class="table-bar">
            <span class="name">姓名</span>
            <!-- <span class="sex">性别</span>
            <span class="tel">联系方式</span> -->
            <span class="company">部门</span>
            <span class="status">状态</span>
            <!-- <span class="img">照片确认</span> -->
            <span class="img">奖品预览</span>
            <span class="do">操作</span>
          </div>
          <!-- <EasyScrollbar> -->
          <div class="table-content" ref="table">
            <div class="content" v-for="(item,index) in currentList" :key="index" :class="{'active': currentUser.user_id == item.user_id}">
              <span class="name" style="padding-left:20px;box-sizing:border-box"> <span style="float:left">{{index+1}}.</span> {{item.name}}</span>
              <!-- <span class="sex">{{item.sex == 1 ? "女" : "男"}}</span>
              <span class="tel">{{item.tel}}</span> -->
              <span class="company">
                <el-tooltip :content="item.department_name" :enterable="false" :open-delay="500" placement="top">
                  <span>{{item.department_name}}</span>
                </el-tooltip>
              </span>
              <span class="status">{{item.is_receive == 0 ? "待领取" : "已领取"}}</span>
              <!-- <transition name="fade">
                <div class="show-img" v-if="item.user_id==-1" style="bottom: 54%;right: 17%;position: absolute;">
                  <UserItem :item=item></UserItem>
                </div>
              </transition>
              <span class="img showImg" @mouseover="showImg(item, $event)" @mouseout="hideImg" :style="{color:item.user_id==-1?'#f2c577':'#9a4e17'}">查看照片</span> -->
              <span class="img showImg" @mouseover="showImg(item.award_picture, $event)" @mouseout="hideImg" :style="{color:item.user_id==-1?'#f2c577':'#9a4e17'}">查看奖品</span>
              <span class="do">
                <span class="lingqu" :class="{'disable': item.is_receive}" @click="onAccept(item)"><img src="../../static/img2/btn_bg01.png" alt="">
                <i>领取</i> </span>
                <span class="delete" size="mini" @click="onDelete(item)"><img src="../../static/img2/btn_bg01.png" alt="">
                <i>删除</i></span>
              </span>
            </div>
          </div>
          <!-- </EasyScrollbar> -->
        </div>
      </div>

      <div class="qingkong-box">
        <span class="qingkong" @click="onEmpty"><img src="../../static/img2/btn_bg02.png" alt="">
                <i>全部清空</i></span>
      </div>
      <div style="width:45%" :style="currentImgStyle">
        <!-- <UserItem v-if="currentImg" :item="currentImg" :none="none"></UserItem> -->
        <ProItem v-if="currentImg" :item="currentImg" :none="none"></ProItem>
      </div>

    </div>
  </div>
</template>

<script>
import api from "@/api";
import * as m_types from "@/store/mutation-types";
import UserItem from "./UserItem";
import ProItem from "./productImg";

export default {
  data() {
    return {
      resultList: null,
      currentList: [],
      currentTab: 0,
      imgShow: false,
      i: 0,
      currentImg: null,
      currentImgStyle: {
        position: "fixed",
        pointerEvents: "none",
        transition: "all 0.5s",
        opacity: 0
      },
      currentUser: {},
      text: "请选择选项",
      prizeTabId:1,
      sendTab:0, //发送选项
      none:'none'
    };
  },
  mounted() {
    this.init();
    this.$root.$on("syncLotteryResult", this.init);
    this.$root.$on("accept", this.accept);

    this.mock_newUser();
  },
  beforeDestroy() {
    this.$root.$off("syncLotteryResult", this.init);
    this.$root.$off("accept", this.accept);
    clearTimeout(this.timerId);
  },
  methods: {
    init() {
      api.getLotteryResult({}).then(data => {
        console.log(data);
        if (data.code) {
          this.$message(data.message);
          return;
        }
        data = data.data;
        this.resultList = data.list;
        // console.log(data)
        console.log(this.currentTab)
        // this.onPrizeTab(this.currentTab);
        this.onPrizeTab(this.currentTab,data.list[0].id);
      });
    },
    onPrizeTab(index,tab) {
      this.currentTab = index; //当前选项
      this.sendTab = tab
      this.currentList = this.resultList[index].list;
      this.prizeTabId = tab
      this.hideImg();
    },
    onAccept(item) {
      if (item.is_receive) {
        return;
      }
      this.$confirm("请再次核实领奖人是否正确。", {
        // type: 'success',
        showClose: false,
        center: true
      })
        .then(() => {
          item.is_receive = 1;
          api
            .acceptPrize({
              // 用户 id
              user_id: item.user_id
            })
            .then(data => {
              if (data.code) {
                this.$message(data.message);
                return;
              }
              data = data.data;
            });
        })
        .catch(() => {});
    },
    onSendSms() {
      this.$confirm("确定要向当前用户发送短信吗", {
        // type: 'warning',
        showClose: false,
        center: true
      }).then(() => {
        api.sendSms({
          prize_id:this.prizeTabId
        }).then(data => {
          if (data.code) {
            this.$message(data.message);
            return;
          }
          data = data.data;
        });
      });
    },
    onDelete(item) {
      this.$confirm("确认要删除该领奖记录吗？", {
        // type: 'warning',
        showClose: false,
        center: true
      })
        .then(() => {
          const i = this.currentList.indexOf(item);
          this.currentList.splice(i, 1);
          api
            .deleteWinner({
              // 记录 id
              id: item.id
            })
            .then(data => {
              if (data.code) {
                this.$message(data.message);
                return;
              }
              data = data.data;
            });
        })
        .catch(() => {});
    },
    onEmpty() {
      this.$confirm("确认要全部清空吗？该操作将无法撤销！", {
        // type: 'error',
        showClose: false,
        center: true
      })
        .then(() => {
          this.currentList.splice(0, this.currentList.length);
          for (const g of this.resultList) {
            g.list = [];
          }
          this.hideImg();
          api
            .emptyWinner({
              prize: this.currentTab
            })
            .then(data => {
              if (data.code) {
                this.$message(data.message);
                return;
              }
              data = data.data;
            });
        })
        .catch(() => {});
    },
    accept(d) {
      // 领奖
      // 领奖时从 socket 接收该用户是否中奖，来展示给发奖人员
      this.currentUser = d;
      if (!this.resultList) {
        return;
      }
      for (let tab = 0, l = this.resultList.length; tab < l; tab++) {
        const list = this.resultList[tab].list;
        for (let row = 0, l = list.length; row < l; row++) {
          const o = list[row];
          if (d.user_id == o.user_id) {
            this.onPrizeTab(tab);
            setTimeout(() => {
              if (d.user_id == o.user_id) {
                const table = this.$refs.table;
                table.scrollTop = (row - 2) * 54;
                const rowNode = table.children[row];
                this.showImg(o, {
                  target: rowNode.querySelector(".showImg")
                });
              }
            }, 0);
            return;
          }
        }
      }
    },
    isShow(item) {
      console.log(item);
      let id = item.user_id;
      this.i++;
      if (this.i % 2 != 0) {
        item.user_id = -1;
      } else {
        item.user_id = 1;
      }
    },
    showImg(item, e) {
      this.currentImg = item;
      const node = e.target;
      const rect = node.getBoundingClientRect();
      this.currentImgStyle.left = rect.left - ((200 - rect.width) >> 1) + "px";
      this.currentImgStyle.top = rect.top - 170 + "px";
      this.currentImgStyle.opacity = 1;
    },
    hideImg() {
      this.currentImgStyle.opacity = 0;
    },
    mock_newUser() {
      // TODO: 正式版应该屏蔽掉 (模拟 socket 用户领奖)
      return;
      let list = this.resultList;
      if (list) {
        let arr = [];
        for (const g of list) {
          if (g.list.length) {
            arr.push(g);
          }
        }
        if (arr.length) {
          list = arr[(arr.length * Math.random()) >> 0].list;
          if (list.length) {
            let o = list[(list.length * Math.random()) >> 0];
            this.accept(o);
          }
        }
      }
      this.timerId = setTimeout(this.mock_newUser, 5000);
    }
  },
  components: {
    UserItem,
    popup,
    ProItem
  },
  computed: {
    tabWidth() {
      return 690 / this.resultList.length;
    }
  }
};
</script>
<style scoped>
@import "../../static/css/LotteryResult.css";
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.logo-box-r {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.logo-box-r img {
  width: auto
}

.item .name{
  display: none
}
.item .name-con{
  display: none
}
.container{
  border: 0;
}
.content{
  height: auto;
}
</style>